<template>
	<div class="content">
		<div class="clear">
			<Form :model="query" label-position="left" :label-width="100">
				<Input v-model="query.userId" class="w200 m-r10" placeholder="用户ID" />
				<Select placeholder="请选择状态" class="w200 m-r10" v-model="query.state">
					<Option value="-1">请选择状态</Option>
					<Option value="1">已发货</Option>
					<Option value="2">未发货</Option>
				</Select>
				<DatePicker :value="dataValue" type="daterange" split-panels placeholder="请选择时间段" class="w200 m-r10" format="yyyy-MM-dd" @on-change="getTime">
				</DatePicker>
				<Button type="primary" v-on:click="getQuery">查询</Button>
			</Form>
		</div>
		<Button class="daochu" type="primary" size="large" @click="exportData" :loading="dcShow">
            <Icon type="ios-download-outline"></Icon>导出
		</Button>
		<Table stripe :columns="columns" :data="conditionQuery" ref="table" :loading="loading"></Table>
		<Page :total="info" show-elevator :page-size="pageSize" show-total @on-change="cuctGetQuery" :current.sync="page"></Page>
		<Modal v-model="Modal.send" title="发货" width='40%'>
			<Form :label-width="100" :model="sendForm" :rules="sendRules" ref="sendRefuse">
				<FormItem label="产品编号" prop='number'>
					<Input class="w-50" v-model="sendForm.number" placeholder="请输入产品编号" disabled />
				</FormItem>
				<FormItem label="收货人名称" prop='receiveName'>
					<Input class="w-50" v-model="sendForm.receiveName" placeholder="请输入收货人名称" disabled />
				</FormItem>
				<FormItem label="收货人手机号" prop='receivePhone'>
					<Input class="w-50" v-model="sendForm.receivePhone" placeholder="请输入收货人手机号" disabled />
				</FormItem>
				<FormItem label="收货人地址" prop='receiveAddress'>
					<Input class="w-50" v-model="sendForm.receiveAddress" placeholder="请输入收货人地址" disabled />
				</FormItem>
				<FormItem label="物流公司" prop='logisticsCompany'>
					<Input class="w-50" v-model="sendForm.logisticsCompany" placeholder="请输入物流公司" />
				</FormItem>
				<FormItem label="物流单号" prop='logisticsNum'>
					<Input class="w-50" v-model="sendForm.logisticsNum" placeholder="请输入物流单号" />
				</FormItem>
			</Form>
			<div slot="footer">
				<Button type="text" size="large" @click="sendCannel">取消</Button>
				<Button type="primary" size="large" @click="send">确定</Button>
			</div>
		</Modal>
		<Modal v-model="Modal.product" title="产品详情" width='40%'>
			<Table stripe :columns="columns1" :data="product" :loading="loading2"></Table>
		</Modal>
		<Modal v-model="Modal.Logistics" title="查看物流" width='40%'>
			<Form :label-width="100">
				<FormItem label="产品编号">
					<Input class="w-50" v-model="LogisticsForm.number" placeholder="请输入产品编号" readonly />
				</FormItem>
				<FormItem label="收货人名称">
					<Input class="w-50" v-model="LogisticsForm.receiveName" placeholder="请输入收货人名称" readonly />
				</FormItem>
				<FormItem label="收货人手机号">
					<Input class="w-50" v-model="LogisticsForm.receivePhone" placeholder="请输入收货人手机号" readonly />
				</FormItem>
				<FormItem label="收货人地址">
					<Input class="w-50" v-model="LogisticsForm.receiveAddress" placeholder="请输入收货人地址" readonly type="textarea" />
				</FormItem>
				<FormItem label="物流公司">
					<Input class="w-50" v-model="LogisticsForm.logisticsCompany" placeholder="请输入物流公司" readonly />
				</FormItem>
				<FormItem label="物流单号">
					<Input class="w-50" v-model="LogisticsForm.logisticsNum" placeholder="请输入物流单号" readonly />
				</FormItem>
			</Form>
		</Modal>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				myHeaders: {
					Authorization: 'bearer ' + localStorage.getItem('mytoken')
				},
				dcShow: false,
				loading: true,
				jsonData: [],
				walletInfo: null, // 总钱包信息
				moneySummary: '', // 提币汇总
				dataValue: ['', ''], // 时间段值
				query: {
					tradeId: '',
					userId: '',
					state: '-1'
				},
				Modal: {
					send: false,
					product: false,
					Logistics: false
				},
				sendForm: {
					number: '',
					receiveName: '',
					receivePhone: '',
					receiveAddress: '',
					logisticsCompany: '',
					logisticsNum: '',
					sendId: '' // 发货主键
				},
				LogisticsForm: {
					number: '',
					receiveName: '',
					receivePhone: '',
					receiveAddress: '',
					logisticsCompany: '',
					logisticsNum: ''
				},
				sendRules: {
					logisticsCompany: [{
						required: true,
						message: '物流公司不能为空',
						trigger: 'blur'
					}],
					logisticsNum: [{
						required: true,
						message: '物流单号不能为空',
						trigger: 'blur'
					}]
				},
				rules: {},
				conditionQuery: [], // 条件查询的结果
				product: [], // 产品详情
				info: null, // 总条数
				page: 1, // 页数
				pageSize: 20, // 每页多少条
				current: 1,
				loading: true,
				loading2: true,
				modelIndex: '', // 审核成功时候需要用到的 ID
				value: '', // 审核失败的时候填入的值
				downList: [],
				columns: [{
						title: '用户ID',
						key: 'uuid',
						align: 'center',
						render: (h, params) => {
							return h('div', params.row.uuid == null ? '#' : params.row.uuid)
						}
					},
					{
						title: '幸运号码',
						key: 'luckyNumber',
						align: 'center',
						render: (h, params) => {
							return h('div', params.row.luckyNumber == null ? '#' : params.row.luckyNumber)
						}
					},
					{
						title: '产品详情',
						key: 'coinId',
						align: 'center',
						render: (h, params) => {
							return h(
								'div', {
									style: {
										cursor: 'pointer',
										color: '#2db7f5'
									},
									on: {
										click: () => {
											this.Modal.product = true
											this.product = []
											this.axios.get('/admin/order/order/' + params.row.publishId).then(res => {
												if(res.data.code == 200) {
													this.product.push(res.data.data)
													this.loading2 = false
												} else if(res.data.code == 501) {
													this.$Message.info(res.data.msg)
													localStorage.removeItem('mytoken')
													this.$router.push({
														name: 'login'
													})
												} else {
													this.$Message.info(res.data.msg)
													this.loading2 = false
												}
											})
										}
									}
								},
								'查看详情'
							)
						}
					},
					{
						title: '产品开奖时间',
						key: 'lotteryTime',
						align: 'center',
						render: (h, params) => {
							return h('div', params.row.lotteryTime == null ? '#' : this.stringToTime(params.row.lotteryTime))
						}
					},
					{
						title: '物流信息',
						key: 'coinId',
						align: 'center',
						render: (h, params) => {
							return h(
								'div', {
									style: {
										cursor: 'pointer',
										color: '#2db7f5'
									},
									on: {
										click: () => {
											if(params.row.status == 0) {
												this.$Message.info('暂未发货')
												return false
											}
											this.Modal.Logistics = true
											this.LogisticsForm = params.row
										}
									}
								},
								'查看物流'
							)
						}
					},
					{
						title: '订单时间',
						key: 'createTime',
						align: 'center',
						sortable: true,
						render: (h, params) => {
							return h('div', params.row.createTime == null ? '#' : this.stringToTime(params.row.createTime))
						}
					},
					{
						title: '操作',
						key: 'action',
						width: 200,
						align: 'center',
						render: (h, params) => {
							return h('div', [
								h(
									'Button', {
										props: {
											type: 'primary',
											size: 'small',
											disabled: params.row.status == 1
										},
										style: {
											marginRight: '5px'
										},
										on: {
											click: () => {
												this.Modal.send = true
												this.sendForm.sendId = params.row.id
												this.sendForm.number = params.row.number
												this.sendForm.receiveName = params.row.receiveName
												this.sendForm.receivePhone = params.row.receivePhone
												this.sendForm.receiveAddress = params.row.receiveAddress
											}
										}
									},
									params.row.status == 1 ? '已发货' : '发货'
								)
							])
						}
					}
				],
				columns1: [{
						title: '产品主图',
						key: 'picture',
						render: (h, params) => {
							return h('div', [
								h('img', {
									attrs: {
										src: params.row.picture,
										preview: '1'
									},
									style: {
										width: '70px',
										margin: '10px 0'
									}
								})
							])
						}
					},
					{
						title: '产品中文标题',
						key: 'cnTitle',
						align: 'center',
						render: (h, params) => {
							return h('div', params.row.cnTitle == null ? '#' : params.row.cnTitle)
						}
					},
					{
						title: '产品英语标题',
						key: 'usTitle',
						align: 'center',
						render: (h, params) => {
							return h('div', params.row.usTitle == null ? '#' : params.row.usTitle)
						}
					},
					{
						title: '产品越南语标题',
						key: 'vnTitle',
						align: 'center',
						render: (h, params) => {
							return h('div', params.row.vnTitle == null ? '#' : params.row.vnTitle)
						}
					},
					{
						title: '份额',
						key: 'openTotal',
						align: 'center',
						render: (h, params) => {
							return h('div', params.row.openTotal == null ? '#' : params.row.openTotal)
						}
					},
					{
						title: 'EXUU',
						key: 'addc',
						align: 'center',
						render: (h, params) => {
							return h('div', params.row.addc == null ? '#' : params.row.addc)
						}
					},
					{
						title: '价值',
						key: 'price',
						align: 'center',
						render: (h, params) => {
							return h('div', params.row.price == null ? '#' : params.row.price)
						}
					}
				]
			}
		},
		mounted() {
			this.$Message.config({ // 配置弹窗的位置
				top: 250
			})
			this.getQuery() // 提现审核列表查询
		},
		methods: {
			getQuery() { // 提现审核列表查询
				this.loading = true
				let params = this.qs.stringify({
					current: this.page, // 当前页【可选，默认1】
					size: this.pageSize, // 每页记录数【可选，默认20】
					userId: this.query.userId,
					status: this.query.state == '-1' ? '' : this.query.state,
					startTime: this.dataValue[0] == '' ? '' : this.dataValue[0] + ' 00:00:01', // 起始日期
					endTime: this.dataValue[1] == '' ? '' : this.dataValue[1] + ' 23:59:59', // 结束日期
				})
				this.axios.post('/admin/order/oderlist', params).then(res => {
					if(res.data.code == 200) {
						this.conditionQuery = res.data.data.records
						this.info = res.data.data.total
						this.loading = false
					} else if(res.data.code == 501) {
						this.$Message.info(res.data.msg)
						localStorage.removeItem('mytoken')
						this.$router.push({
							name: 'login'
						})
					}
				})
			},
			cuctGetQuery(page) { // 提现审核列表分页查询
				this.loading = true
				let params = this.qs.stringify({
					current: this.page, // 当前页【可选，默认1】
					size: this.pageSize, // 每页记录数【可选，默认20】
					number: this.query.tradeId,
					userId: this.query.userId,
					status: this.query.state == '-1' ? '' : this.query.state,
					startTime: this.dataValue[0] == '' ? '' : this.dataValue[0] + ' 00:00:01', // 起始日期
					endTime: this.dataValue[1] == '' ? '' : this.dataValue[1] + ' 23:59:59', // 结束日期
				})
				this.axios.post('/admin/financial/transfer/given', params).then(res => {
					if(res.data.code == 200) {
						this.conditionQuery = res.data.data.records
						this.conditionQuery.forEach((row, index) => {
							this.conditionQuery[index].createTime = '\t' + this.conditionQuery[index].createTime
							this.conditionQuery[index].coinId = this.conditionQuery[index].coinId == 0 ? 'EXUU' : '#'
						})
						this.info = res.data.data.total
						this.loading = false
					} else if(res.data.code == 501) {
						this.$Message.info(res.data.msg)
						localStorage.removeItem('mytoken')
						this.$router.push({
							name: 'login'
						})
					}
				})
			},
			sendCannel() {
				this.Modal.send = false
				this.$refs['sendRefuse'].resetFields() // 重置表单
			},
			send() {
				this.$refs.sendRefuse.validate((valid) => { // 表单验证
					if(valid) {
						this.axios.put('/admin/order/deliver', this.qs.stringify({
							logisticsCompany: this.sendForm.logisticsCompany,
							id: this.sendForm.sendId,
							logisticsNum: this.sendForm.logisticsNum
						})).then(res => {
							if(res.data.code == 200) {
								this.$Message.info(res.data.msg)
								this.Modal.send = false;
								this.getQuery()
								this.loading = true
								this.$refs['sendRefuse'].resetFields() // 重置表单
							}
						})
					}
				})
			},
			exportData() { // 导出
				this.dcShow = true;
				let params = this.qs.stringify({
					current: this.page, // 当前页【可选，默认1】
					size: this.pageSize, // 每页记录数【可选，默认20】
					userId: this.query.userId,
					status: this.query.state == '-1' ? '' : this.query.state,
					startTime: this.dataValue[0] == '' ? '' : this.dataValue[0] + ' 00:00:01', // 起始日期
					endTime: this.dataValue[1] == '' ? '' : this.dataValue[1] + ' 23:59:59', // 结束日期
				})
				this.axios.post('/admin/order/oderlist', params).then(res => {
					if(res.data.code == 200) {
						let params = this.qs.stringify({
							current: 1, // 当前页【可选，默认1】
							size: res.data.data.total, // 每页记录数【可选，默认20】
							userId: this.query.userId,
							status: this.query.state == '-1' ? '' : this.query.state,
							startTime: this.dataValue[0] == '' ? '' : this.dataValue[0] + ' 00:00:01', // 起始日期
							endTime: this.dataValue[1] == '' ? '' : this.dataValue[1] + ' 23:59:59', // 结束日期
						})
						this.axios.post('/admin/order/oderlist', params).then(res => {
							if(res.data.code == 200) {
								this.downList = res.data.data.records
								this.downList.forEach((row, index) => {
									this.jsonData.push({
										uuid: this.downList[index].uuid,
										luckyNumber: this.downList[index].luckyNumber,
										lotteryTime: this.stringToTime(this.downList[index].lotteryTime),
										createTime: this.stringToTime(this.downList[index].createTime)
									})
								})
								let str = `用户ID,幸运号码,产品开奖时间,订单时间\n`;
								this.downLoad(this.jsonData, str, '订单管理列表');
							}
						})
					}
				})
			},
			getTime(daterange) { // 处理时间段时间格式
				this.dataValue = daterange
			},
			handleSuccess(res, file) {
				this.$Message.info(res.msg)
				this.imgUrl = res.data[0].url
			},
			Fixed(count) {
				count += ''
				let rs = count.indexOf('.')
				if(rs < 0) {
					return count + '.00'
				}
				while(count.length <= rs + 2) {
					count += '0'
				}
				return count.substr(0, rs + 3)
			}
		}
	}
</script>